<template>
  <div class="tab-container">
    <ul class="tab-nav">
      <li
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: activeTab === item.value }"
        @click="handleTabChange(item.value)"
      >
        <span
          :style="{
            color: activeTab === item.value ? activeColor : normalColor,
          }"
          :class="activeTab === item.value ? 'active' : ''"
          >{{ item.label }}</span
        >
        <span
          v-if="activeTab === item.value"
          class="underline"
          :style="{ borderColor: activeColor }"
        ></span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue"

// 接收父组件传递的选项卡数据
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  activeTab: {
    type: String,
    default: "",
  },
  activeColor: {
    type: String,
    default: "#FF3F81",
  },
  normalColor: {
    type: String,
    default: "rgba(0,0,0,0.85)",
  },
})

// 定义方法用于处理选项卡切换
const handleTabChange = (tabValue) => {
  emit("tab-change", tabValue)
}

const emit = defineEmits(["tab-change"])
</script>

<style scoped>
.tab-container {
  /* padding: 10px 0; */
}
.tab-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.tab-nav li {
  margin-right: 20px;
  cursor: pointer;
  height: 26px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ff3f81;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  position: relative;
}
.active span {
  font-weight: bold;
}
.underline {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 5px;
}
.active::after {
  position: absolute;
  content: " ";
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff3f81;
}
</style>
